<template>
  <view class="tan" v-if="showCha">
    <view class="tan-con">
      <view class="uni-form-item">
        <view class="title">
          vin：
        </view>
        <view class="uni_name">
          <input class="uni-input" v-model="otherVin" placeholder="请输入您想查询的车辆vin" />
        </view>
      </view>
      <view class="bottom">
        <view class="close" @click="closeTan">取消</view>
        <view class="confirm" @click="confirmTan">确认</view>
      </view>
    </view>
  </view>
  <view class="Zhu">
    <!-- 顶部个人信息 -->
    <view class="bg-white">
      <view class="flex padding info" @tap="setUser">
        <view class="flex">
          <view class="padding-lr-xs">
            <!-- style="background-image:url(https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132);" -->
            <view class="cu-avatar lg round">
              <image style="width:80rpx;height: 80rpx;border-radius: 50%;" :src="avatarUrl" class="refreshIcon"></image>
            </view>
          </view>
          <view class="padding-xs text-xl text-black">
            <view> {{ userName }}</view>
            <view class="cu-tag round line-green sm">使用电车减排</view>
          </view>
        </view>
        <view><text class="cuIcon-right"></text></view>
      </view>
    </view>
    <view class="dengLuWrap">
      <view class="dengLu" v-if="!isLogin" @tap='loginIn'>
        登录
      </view>
    </view>

    <view class="cu-list_it margin-top-sm padding-lr-xs radius-lg-bottom">
      <view class="cu-item_lover">

        <text>我的爱车</text>
        <!-- <text>车辆列表</text> -->
      </view>
      <view class="cu-item_lover_bom" @click="openCar">
        <image class="cu_ai_che" src="../../static/images/aiche.jpg" mode=""></image>
        <view>

          <view class="ai_che_text2">车架号</view>
          <view class="">
            vin:{{ userInfo.vin }}
          </view>
        </view>
        <view class="right">
          <!-- 添加车辆 -->
          <text class="cuIcon-add" ></text>
        </view>
      </view>
    </view>
    <!-- bind:onSuccess="driverSuccess" -->
    <!-- <ocr-navigator @onSuccess="driverSuccess"   certificateType="drivingLicense" selectedOptions="{{['plateNum','vehicleType','owner']}}">
  <button type="primary">行驶证识别</button>
</ocr-navigator> --> <!---->
    <!-- 基本数据 -->
    <view class="cu-list grid col-4 no-border padding-lr-xs radius-lg-bottom">
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          0
        </view>
        <text>优惠券</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          0
        </view>
        <text>权益卡</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          0
        </view>
        <text>保修卡</text>
      </view>
      <view class="cu-item">
        <view class="text-black text-bold text-xxl">
          0
        </view>
        <text>收据</text>
      </view>
    </view>
    <!-- 助力/推荐/邀请 -->
    <!-- <view class="margin-top-sm padding-lr-xs">
	    <view class="bg-brown light radius-lg shadow-blur">
	      <view class="flex padding-tb-sm padding-lr-sm justify-between">
	        <view class="padding-xs">
	          <view>9.9元开通超级会员最高可省￥40</view>
	        </view>
	        <view class="">
	          <view class="cu-btn round bg-black">开通会员</view>
	        </view>
	      </view>
	    </view>
	  </view> -->

    <view class="cu-list grid col-3 no-border text-black  padding-bottom radius-lg-bottom">
      <!-- :bindtap="item.bindtap" -->
      <view class="cu-item" v-for="(item, index) in iconList" :key="index" @tap="bindZan(item)">
        <view :class="['cuIcon-' + item.icon, 'text-' + item.color, 'text-shadow']" style="font-size: 56rpx;">
          <view class="cu-tag badge" v-if="item.badge != 0">
            <block v-if="item.badge != 1">{{ item.badge > 99 ? "99+" : item.badge }}</block>
          </view>
        </view>
        <text>{{ item.name }}</text>
      </view>
    </view>


    

    <view class="margin-top-sm padding-lr-xs">
      <view class="bg-white light radius-lg shadow-blur">
        <!-- 	      <view class="flex padding-tb-sm padding-lr-sm justify-between">
	         <view class="padding-xs">
	          <view class="text-xl text-black">惊喜连连·洁净一秋</view>
	          <view class="padding-top-xs">洗车来优惠<text class="text-red text-bold"> 6.6折 </text><text class="cuIcon-roundrightfill text-red"></text></view>
	        </view> 
	        <view class="">
	          <view class="cu-btn round bg-gradual-pinknew margin-top-sm">6折优惠</view>
	        </view>
	      </view> -->
      </view>
    </view>
    <!-- 其他功能 -->
    <view class="cu-bar  margin-top grid col-4 no-border bg-white radius-lg-top">
      <view class="action">
        <text class="text-xl">我的充电</text>
      </view>
    </view>
    <view class="cu-list grid col-4 no-border text-black  padding-bottom radius-lg-bottom">
      <view class="cu-item" v-for="(item, index) in iconOtherList" :key="index" @tap="bindZan(item)">
        <view :class="['cuIcon-' + item.icon, 'text-' + item.color, 'text-shadow']" style="font-size: 56rpx;">
          <view class="cu-tag badge" v-if="item.badge != 0">
            <block v-if="item.badge != 1">{{ item.badge > 99 ? "99+" : item.badge }}</block>
          </view>
        </view>
        <text>{{ item.name }}</text>
      </view>
    </view>

  </view>


</template>

<script setup>

import {
  onMounted,
  ref,
  defineProps,
  watch,
  reactive,
} from 'vue'
import {
  onLoad,
  onShow
} from "@dcloudio/uni-app";
import {
  RSAencrypt,
  RSAdecrypt
} from "../../utils/rsa.js"
let otherVin = ref('')
let showCha = ref(false)
const isDialog = ref(false)
const showDialog = ref(false)
const inputDialog = ref();

const confirmTan = () => {
  showCha.value = false
//  跳转页面
uni.navigateTo({
  url: "../healthy/healthy?otherVin="+otherVin.value
})

}
const closeTan = () => {
  showCha.value = false
}
const userInfo = ref({})
const userName = ref('个人信息设置')
const avatarUrl = ref(
  'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
)
let isLogin = uni.getStorageSync('isLogin')
onMounted(() => {
  
  console.log(inputDialog.value, 'inputDialog');
  isLogin = uni.getStorageSync('isLogin')
  if (uni.getStorageSync('userName')) {
    userName.value = uni.getStorageSync('userName')
  }
  console.log('触发了', uni.getStorageSync('avatar'))
  if (uni.getStorageSync('avatar')) {
    avatarUrl.value = uni.getStorageSync('avatar')
  }

})
onLoad(() => {
  let pages = getCurrentPages();
  const option = currentPage.options;
  console.log(option, 'option')

  isLogin = uni.getStorageSync('isLogin')
  console.log('触页面dd')
  if (uni.getStorageSync('userName')) {
    userName.value = uni.getStorageSync('userName')
  }
  // uni.setStorageSync('avatar', result)

  if (uni.getStorageSync('avatar')) {
    avatarUrl.value = uni.getStorageSync('avatar')
  }
})



onShow(() => {
  isLogin = uni.getStorageSync('isLogin')
  console.log('触发页面dd')
  if (uni.getStorageSync('userName')) {
    userName.value = uni.getStorageSync('userName')
  }
  if (uni.getStorageSync('avatar')) {
    avatarUrl.value = uni.getStorageSync('avatar')
  }

  getInfo()
})

const loginIn = () => {
  // if (uni.getStorageSync('isLogin') == true) {} else {
  uni.reLaunch({
    url: '/pages/login/login'
  })
  // }
}
const getInfo = () => {
  console.log(uni.getStorageSync('openid'), '加密前的openid')
  let deOpenId = RSAencrypt(uni.getStorageSync('openid'))
  // let dcOpenId = RSAdecrypt(deOpenId)

  uni.request({
    url: 'https://www.chargesystem.cn/charge4gv2/wechat/getUserInfo', // 你的登录API地址
    method: 'GET',
    data: {
      openid: deOpenId,
    },
    success: (res) => {
      console.log(res, uni.getStorageSync('openid'), '我的页面')
      if (res.data.code == 200) {

        userInfo.value = res.data.result
        // console.log(res.data.result.vin, 'res')
        if (res.data.result.vin) {
          uni.setStorageSync('vin', res.data.result.vin);
        }
      } else {
        uni.removeStorageSync('vin')
      }
    },
    fail: () => {
      uni.removeStorageSync('vin')
      uni.showToast({
        title: '请求失败',
        icon: 'none'
      });
    }
  });
}
const setUser = () => {
  let data = {
    title: 'hello',
    id: 1
  }
  uni.navigateTo({
    url: `../setUser/setUser?data=` + encodeURIComponent(JSON.stringify(data))
  })
}
const openCar = () => {
  uni.navigateTo({
    url: `../loveCar/loveCar`
  })
}


let iconList = reactive([{
  icon: 'moneybagfill',
  color: 'blue',
  badge: 0,
  id: 5,
  name: '电池健康',
  bindtap: "bindZan"
}, {
  icon: 'presentfill',
  color: 'red',
  badge: 0,
  name: '查询其他车辆报告',
  id: 8,
  bindtap: "bindZan"
}, {
  icon: 'formfill',
  color: 'purple',
  badge: 0,
  id: 9,
  name: '我的车辆列表',
  bindtap: "showResource"
}
  // ,{
  // 	icon: 'shopfill',
  // 	color: 'green',
  // 	badge: 0,
  // 	id: 1,
  // 	name: '返修/售后',
  // 	bindtap: "bindPoint"
  // }
])

let iconOtherList = reactive([{
  id: 1,
  icon: 'location',
  color: 'blue',
  badge: 0,
  name: '地址管理'
}, {
  id: 2,
  icon: 'service',
  color: 'blue',
  badge: 0,
  name: '电话客服',
  bindtap: "bindZan"
}, {
  id: 3,
  icon: 'mark',
  color: 'blue',
  badge: 0,
  name: '在线客服',
  bindtap: "showResource"
}, {
  id: 4,
  icon: 'mail',
  color: 'blue',
  badge: 0,
  name: '退出登录',
  bindtap: "bindCollect"
}])
// {
// 	id: 5,
// 	icon: 'settings',
// 	color: 'blue',
// 	badge: 0,
// 	name: '电池健康',
// 	bindtap: "bindZan"
// }
const driverSuccess = (item) => {
  console.log(item, 'ttttttttttttt')
}
const bindZan = (item) => {
  if (item.id === 5) {
    console.log(uni.getStorageSync('vin'), 'uni.getStorageSync')
    if (!uni.getStorageSync('vin')) {
      uni.showModal({
        title: '提示',
        content: '请您先绑定车辆vin,再查看电池健康报告!',
        success: function (res) {
        },
      });
    } else {
      uni.navigateTo({
        url: "../healthy/healthy"
      })
    }
  } else if (item.id == 4) {
    uni.showModal({
      title: '提示',
      content: '确定退出登录吗?',
      success: function (res) {
        if (res.confirm) {
          uni.removeStorageSync('isLogin')
          uni.removeStorageSync('vin')

          uni.showToast({
            title: '退出成功',
            icon: "success",
            duration: 2000,
          });
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }
      },
    });

  } else if (item.id == 8) {
    showCha.value = true
  } else if (item.id == 9) {
    uni.navigateTo({
        url: "../loveCar/carList"
      })
    
  }

}
</script>

<style>
.cuIcon-add{
  font-size: 20px;
  color: #07c160;
}
.tan {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.uni-form-item{
  display: flex;
  margin: 40px 20px 30px 20px;
  font-size: 28rpx; 
}
.confirm{
  height: 45px;
  width: 50%;
  box-sizing: border-box;
  color: #576b95;
  font-weight: 600;
  font-size: 32rpx;
  line-height: 45px;
  text-align: center;
  border-left: solid 2px #f5f5f5;
}
.uni-input{
 
}
.uni_name{
  width: 85%;
  border-bottom: solid 1px #999;
  
 
}
.close{
  height: 45px;
  width: 50%;
  box-sizing: border-box;
  color: #000;
  font-weight: 600;
  font-size: 32rpx;
  text-align: center;
  line-height: 45px;
  
}
.bottom{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  border-top: solid 2px #f5f5f5;
}
.tan-con {
  z-index: 1000;
  position: absolute;
  height: 280rpx;
  width: 70%;
  color: #333;
  border-radius: 26rpx;
  background-color: #fff;


}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cu-list_it {
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 30rpx;
}

.cu-item_lover {
  display: flex;
  justify-content: space-between;
  line-height: 40rpx;
  padding: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.cu-item_lover_bom {
  padding-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx;
  align-items: center;
}

.cu_ai_che {
  width: 160rpx;
  height: 100rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}

.ai_che_text1 {
  font-size: 24rpx;
  color: #ccc;
  margin-bottom: 16rpx;
}

.ai_che_text2 {
  font-size: 24rpx;
  /* background-color:#a1c5f0; */
  color: #333;
}

.img_right {
  width: 26rpx;
  height: 26rpx;
}

.ocr-wrapper {
  margin: 40rpx auto;
  width: 375rpx;
}

.intro {
  margin: 40rpx;
}

.dengLuWrap {
  height: 80rpx;
  width: 100%;
  background-color: #fff;
}

.dengLu {
  margin: 0 auto;
  width: 200rpx;
  border-radius: 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #07c160;
  color: #fff;

}
</style>